import React from 'react'
import { BaseListPage ,IBaseListPageState,IBaseListPageProps, columnRenders, http, UdModal, UdModalForm} from '@/lib';
import { Select, Button, Input } from 'antd';
import {
  UdDrawer,
} from '@/lib'
import StocksApprovalProcess from './Approve'
import apis from '@/apis/SystemMasterDataManage'
import udMainStore from '@/store/UdMain';
const { Option } = Select;

export default class MaterialManagementList extends BaseListPage<MaterialManagementListProps, MaterialManagementListState> {
    public brandCompanies = udMainStore.brandList
    
    constructor(props){
        super(props)
        this.state = {
            title: "物料分类管理",
            rowKey: 'id',
            queryApi: (value)=>{
                console.log(value);
                const conditions = { 
                    "brandCode": value.brandCode,
                    "code": value.code,
                    "name": value.name,
                    "status": value.status
                }
              return http.post(apis.queryProductGroupPage,{...value,conditions})
            },
            method:'POST',
            conditions: [
                { id: 'brandCode', label: '销售组织',render: ()=>(
                    <Select placeholder="请选择销售组织">
                      {this.brandCompanies.map(({value,title})=>(<Option key={value} value={value}>{title}</Option>))}
                    </Select>
                  )},
                { id: 'name', label: '物料分类名称'},
                { id: 'code', label: '物料分类编号'},
                { id: 'status', label: '状态',render:()=>(
                 <Select>
                    <Option value="OPEN">启用</Option>
                    <Option value="CLOSE">禁用</Option>
                </Select>
                )},
            ],
            columns: [
                { title: '序号', dataIndex: 'id', render: (text, record, index) => index + 1 },
                ['物料分类编号', 'code'],
                ['物料分类名称', 'name'],
                ['所属销售组织', 'brandName'],
                {
                    title: '关联物料数量',
                    key: 'materialCount',
                    width:100 ,
                    render: (record) => (
                      <span>
                         <a onClick={()=>this.handeltoChildpage(record)}>{record.materialCount}</a>
                      </span>
                    ),
                  },
                {title:'状态', key:'status',dataIndex:'status',render:(record)=>(
                  <span>{record=='OPEN'?'启用':'禁用'}</span>
                )},
                ['更新时间', 'updateTime'],
                {
                    title: '操作',
                    width: 200,
                    dataIndex: 'operate',
                    render: columnRenders.operate([
                        { title: '关联物料',  action: (text, row) => this.handeltoChildpage(row)},
                        { title: '是否走审批流程',  action: (text, row) => this.isApprove(row)},
                    ])
                }
            ],
            tableProps: {
                scroll: { x: true },
            },
            
        }
    }

    private isApprove = (text) => {
      UdDrawer.open({
        title: '是否走审批流程',
        width: '40%',
        footer: true,
        content: <StocksApprovalProcess rows={text} onRefresh={this.onRefresh}/>,
        
      })
    }
    
    private onRefresh = (text) =>{
      this.query()
    }

    private handeltoChildpage = (text) =>{
      this.props.history.push(`/masterdata/materialmanagement/relatedmaterial/${text.id}`)
    }

}


interface MaterialManagementListState extends IBaseListPageState {

}

interface MaterialManagementListProps extends IBaseListPageProps {

}
